<template>
  <div>
  	<shop-header ref="shopHeader">	
			<h2>我的评价</h2>	
		</shop-header>
		<div class="order-nav-wrapper">
			<div class="my-order-nav bottom-1px">
				<div class="order-nav-item" :class="{ active: nowIndex == 0 }" @click="toggleAssessType(0)"><span>全部评价</span></div>
				<div class="order-nav-item" :class="{ active: nowIndex == 1 }" @click="toggleAssessType(1)"><span>有图评价</span></div>
			</div>
		</div>
		<split></split>
		<v-comment :comments="comments"></v-comment>
		<no-results v-if="comments.length == 0"></no-results>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'
import { formatDate } from '@/utils/mUtils'
import ShopHeader from '@/components/public/ShopHeader'
import Split from '@/components/public/Split'
import VComment from '@/components/public/Comment'
import http from '@/utils/http'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
		Group,
		Cell,
		Split,
		VComment,
		NoResults
	},
	data () {
		return {
			nowIndex: 0,
			showPro: true,
  		comments: []
		}
	},
  methods: {
  	// 获取用户评价
  	getUserComments (type) {
  		http.get('/api/v1/getUserComments/' + type, {}, false, res => {
  			if (res.status == 1) {
  				this.comments = res.data
  			}
  		})
  	},
  	toggleAssessType (index) {
  		this.nowIndex = index
  		this.comments = []
  		let type = null
  		switch (index) {
  			case 0:
  				type = 'all'
  				break;
  			case 1:
  				type = 'photo'
  				break;	
  		}

  		this.getUserComments(type)
  	}
  },
  mounted () {
  	this.getUserComments('all')
  } 
}
</script>

<style scoped>
.avatar {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	overflow: hidden;
}
.cell-item {
	padding: 12px 15px !important;
}
.exit-btn {
	padding: 10px 15px;
}
.exit-btn button {
	width: 100%;
	height: 42px;
	color: #fff;
}
.order-nav-wrapper {
	height: 42px;
}
.my-order-nav {
	position: fixed;
	top: 43px;
	width: 100%;
	max-width: 640px;
	display: flex;
	background: #fff;
	z-index: 98;
}
.order-nav-item {
	flex: 1;
	text-align: center;
}
.order-nav-item span {
	position: relative;
	display: inline-block;
	font-size: 14px;
	padding: 10px 0;
	color: #333;
}
.order-nav-item.active span {
	color: #e93b3d; 
}
.order-nav-item.active span:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #e93b3d;
}
.message-cell-item {
	background: #fff;
	padding: 15px;
}
.message-cell-item:active {
	background: #f8f8f8;
}
.message-cell-item:after {
	bottom: 0;
}
.title {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	overflow: hidden;
	height: 40px;
	margin-bottom: 8px;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.message-flex {
	display: flex;
	font-size: 12px;
	color: #999;
	align-items: center;
}
.datetime {
	flex: 1;
}
.toView {
	flex: 0 0 auto;
	color: rgb(5, 217, 120);
}
.toView * {
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
}
.toView svg {
	fill: rgb(5, 217, 120);
}
</style>
